<template>
	<!-- 电池列表 -->
	<div class="content" v-if="clickDetail">
		<div class="content-top">
			电池管理_电池查询
		</div>
		<div class="content-search">
			<el-form :inline="true" class="demo-form-inline" :model="form" style="margin-top: 20px;">
				<el-form-item label="电池编号：">
					<el-input placeholder="请输入电池编号" v-model="form.code"></el-input>
				</el-form-item>
				<el-form-item label="换电站：">
					 <el-select v-model="form.station" placeholder="请选择">
						<el-option
							v-for="item in station_list"
							:key="item.id"
							:label="item.name"
							:value="item.id">
							</el-option>
					</el-select>
				</el-form-item>
                <el-form-item label="车牌：">
					<el-input placeholder="请输入车牌" v-model="form.licensePlate"></el-input>
				</el-form-item>
				<el-form-item label="电池位置：">
					<el-checkbox-group 
						v-model="form.currentPosition"
						:max="1">
						<el-checkbox v-for="(city,idx) in cities" :label="idx" :key="idx">{{city}}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
				<!-- </el-form-item> -->
			</el-form>
		</div>
		<div class="content-operation">
			<el-button type="primary" icon="el-icon-plus" @click='is_add = true' v-if="has_add">电池入库</el-button>
		</div>
		<div class="content-table">
			<el-table :data="tableData" show-header stripe style="width: 100%;">
				<el-table-column align="center" prop="code" label="电池编码" width="200"></el-table-column>
				<el-table-column align="center" prop="model" label="电池型号" width="200"></el-table-column>
				<el-table-column align="center" prop="type" label="电池类型" width="200"></el-table-column>
				<el-table-column align="center" prop="currentPosition_dictText" label="电池位置"></el-table-column>
				<el-table-column align="center" prop="createDate" width="160" label="入库时间"></el-table-column>
				<el-table-column align="center" prop="enterStationDate" width="160" label="最近进站时间"></el-table-column>
				<el-table-column align="center" prop="outStationDate" width="160" label="最近出站时间"></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="200">
					<template slot-scope="scope">
						<el-button @click="hanleDetail(scope.row)" type="text" size="small"><i class="el-icon-view"></i>详情</el-button>
						<el-button @click="handleClick(scope.row)" v-if="has_edit" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
						<el-button @click="handleClick1(scope.row)" v-if="has_del" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="content-page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
			 :page-size=limit layout="prev, pager, next, jumper" :total=total>
			</el-pagination>
		</div>
		<template v-if="is_add">
			<div class="all-screen"></div>
			<div class='add-box'>
				<BatteryAdd @saveAdd='saveAdd'></BatteryAdd>
			</div>
		</template>
		<template v-if="is_edit">
			<div class="all-screen"></div>
			<div class='add-box'>
				<BatteryEdit @saveEdit='saveEdit' :id='id'></BatteryEdit>
			</div>
		</template>
		
	</div>
	<div v-else>
        <BatteryDetail  @isDetail='isDetail' :id='id'></BatteryDetail>
	</div>
</template>

<script>
const cityOptions = ['仓库', '换电站', '车上'];
	import BatteryAdd from '@/components/battery/BatteryAdd.vue'
	import BatteryEdit from '@/components/battery/BatteryEdit.vue'
	import BatteryDetail from '@/components/battery/BatteryDetail.vue'
	import Global from '@/components/Global.vue'
	export default {
		components: {
			BatteryAdd: BatteryAdd,
			BatteryEdit: BatteryEdit,
			BatteryDetail: BatteryDetail
		},
		props:['power'],
		data() {
			return {
				id: 'id',
				is_add: false,
				is_edit: false,
				is_detail:false,
				tableData: [],
				limit: 10,
				page: 1,
				total: 1,
				has_add:false,
				has_edit:false,
				has_del:false,
				form:{
					code:'',
					station:'',
					licensePlate:'',
					currentPosition:[],
				},
				clickDetail:true,
				station_list:[],
				cities: cityOptions
			}
		},
		mounted() {
			if(this.clickDetail){
			   this.get_list();
			   this.check_power();
			   this.get_station_list()
			}
			
		},
		methods: {
			check_power(){
				var self = this;
				this.power.forEach(function(element) {
					if(element.permissionName.indexOf("添加") != -1 )self.has_add = true;
					if(element.permissionName.indexOf("编辑") != -1 )self.has_edit = true;
					if(element.permissionName.indexOf("删除") != -1 )self.has_del = true;
				});
			},
			/* 换电站列表 */
			get_station_list() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'station/station/findPage', {
						"limit": "10000",
						"page": "1"
					})
					.then(function(res) {
						if (res != '') {
							var list = res.data.list;
							list.splice(0, 0, { 'id': '', 'name': '请选择' })
							self.station_list = list
							
						}
				
					})
			},
			/*  */
			get_list() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'station/battery/findPage', {
				  "limit": self.limit + "",
				  "page": self.page + "",
				  "code": self.form.code,
				  "stationId": self.form.station,
				  "licensePlateNumber": self.form.licensePlate,
				  "currentPosition": JSON.stringify(self.form.currentPosition).replace("[","").replace("]","")
				  })
				  .then(function (res) {
					  if(res != ''){
						  self.tableData = res.data.list;
						  self.total = res.data.totalCount;
						  self.page = res.data.currPage;
					  }
				  })
				
			},
			onSearch(){
				this.page = 1
				this.get_list()
			},
			saveAdd(type) {
				if (type == 2) {
					this.get_list();
				}
				this.is_add = false;
			},
			saveEdit(type) {
				if (type == 2) {
					this.get_list();
				}
				this.is_edit = false;
			},
			isDetail(){
				this.clickDetail = true
			},
			hanleDetail(row){
				this.id = row.id
				this.clickDetail = false
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.page = val;
				this.get_list();
				console.log(`当前页: ${val}`);
			},
			handleClick(row) {
				this.id = row.id;
				this.is_edit = true;
			},
			handleClick1(row) {
				this.delopen(row);
			},
			delopen(row) {
				var self = this;
				this.$confirm('此操作将删除该电池, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					$.ajax({
						url: Global.serverIp + 'station/battery/delete',
						data: '["' + row.id + '"]',
						xhrFields: {
							withCredentials: true
						},
						beforeSend : function(request) {
							request.setRequestHeader("Authorization", 'Bearer '+localStorage.getItem('token'));
						},
						contentType: 'application/json;charset=utf-8',
						dataType: 'json',
						type: 'delete',
						success: function(res) {
							if (res.code == Global.success_code) {
								console.log(res);
								self.$popup.open("删除成功");
								self.get_list();
							} else {
								self.$popup.open(res.msg);
							}
						},
						error: function(res) {
							if(res.responseJSON.code == '040005'){
								self.$popup.open("登录过期");
							}else{
								self.$popup.open("请求失败");
							}
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			radioChange1(txt){
				
			},
		},

	}
	import '@/assets/css/common.css'
</script>
<style>
   .el-checkbox-group{
	   margin-left: 0 !important;
   }
</style>
